/**
 * Created by Administrator on 2018-08-13.
 * 机位利用率分析
 */


define(function (require,exports,module) {
    var sTpl = require("./gatePositionUsed.html");
    require("./gatePositionUsed.css");
    require("../../../lib/echarts.min.js");
    var VueComponent = Vue.extend({
        template: sTpl,
        data:function () {

            return {
                gatePuData:[],
                gatePuRatioData:[
                    {
                        gatePosition:"101/C",
                        useRatio:'50%'
                    },
                    {
                        gatePosition:"102/D",
                        useRatio:'45%'
                    },
                    {
                        gatePosition:"103/E",
                        useRatio:'40%'
                    }
                    ,
                    {
                        gatePosition:"104/F",
                        useRatio:'35%'
                    },
                    {
                        gatePosition:"105/G",
                        useRatio:'30%'
                    },
                    {
                        gatePosition:"106/H",
                        useRatio:'25%'
                    },
                    {
                        gatePosition:"107/I",
                        useRatio:'18%'
                    },
                    {
                        gatePosition:"108/J",
                        useRatio:'16%'
                    },
                    {
                        gatePosition:"109/K",
                        useRatio:'14%'
                    },
                    {
                        gatePosition:"110/L",
                        useRatio:'12%'
                    },
                    {
                        gatePosition:"111/M",
                        useRatio:'8%'
                    },
                    {
                        gatePosition:"112/N",
                        useRatio:'6%'
                    }
                    ,
                    {
                        gatePosition:"113/O",
                        useRatio:'4%'
                    }
                    ,
                    {
                        gatePosition:"114/P",
                        useRatio:'4%'
                    }
                    ,
                    {
                        gatePosition:"111/M",
                        useRatio:'4%'
                    }
                    ,
                    {
                        gatePosition:"114/M",
                        useRatio:'4%'
                    }
                ]
            }
        },
        methods: {
            cellStyle:function () {
                
            },
            gatePuStyle:function (i) {
                if(parseFloat(this.gatePuRatioData[i].useRatio)>=parseFloat('50%')){
                    return  {backgroundColor:'#f36b95'};
                }else if (parseFloat(this.gatePuRatioData[i].useRatio)>=parseFloat('20%')){
                    return  {backgroundColor:'#e6e854'};
                }else{
                    return  {backgroundColor:'#4fbdc7'};
                }
            },

            /*机位占用情况*/
            gatePu: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('gatePu'))
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '机位占用情况',
                        x:'left',
                        textStyle:{
                            color:'#00FFFF',
                            fontSize:'14'
                        }
                    },
                    color:['#ef5b5b','#00d8da','#8661aa','#f6ac1c','#c85567'],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series : [
                        {
                            name:'次数',
                            type:'pie',
                            radius : [30, 110],
                            center : ['50%', '50%'],
                            roseType : 'area',
                            data: [
                                {value: 10, name: '未使用'},
                                {value: 7, name: '分配且占用'},
                                {value: 9, name: '分配未使用'},
                            ]
                        }
                    ]
                });
            }

        },
        mounted:function() {
                this.$nextTick(function () {
                    this.gatePu();
                }.bind(this));

        },
        watch:{
        },
        computed:{

        },
        activated:function () {
            messages.$emit('change','机位利用率分析');
        }
    })
    module.exports=VueComponent;
    module.exports.reDefine=function (val) {
        module.exports.type=val;
        return module.exports;
    }

})


